*{
	margin: 0px;
	padding: 0px;
}
.navbar{
	margin: 0px !important;
	padding: 0px !important;
	height: 50px !important;
}
a{
	color: #fff;
}
.md-header{
	height: 50px;
	padding: 0px 15px;
	background: #222;
	width:100%;
	top: 0px;
	z-index: 99999;
}
.md-header .doc-name{
	font-size: 18px;
	line-height: 50px;
	height: 50px;
	text-decoration: none;
	color: red;
}
.md-header .doc-name:HOVER{
	color: #fff;
}
.md-main{
	background: #fff;
	padding: 0px;
	display: flex;
	width: 100%;
}
.md-main .md-left{
	width: 300px;
	background: #000;
	overflow: hidden;
	transition: width 0.3s;
	min-height: 200px;
}
.md-main .md-right{
	flex: 1;
}

.modal-dialog{
	margin: 100px auto;
}

.md-menus{
	font-size: 16px;
	display: inline;
}

@media screen and (min-width: 0px) and (max-width: 767px){
	.md-main .md-left{
		/*
		transform: translate(-300px, 0)
		*/
		left:-300px;
	}
	.md-main .md-right{
		left:0px;
	}
	.navbar-nav{
		display: none;
	}
}